﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Electron.NET Player</title>
    <link rel="stylesheet" href="/favicon.ico">

    <link href="~/lib/element-ui/index.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="https://vjs.zencdn.net/7.7.6/video-js.css">
    <script src="https://vjs.zencdn.net/7.7.6/video.js"></script>
    <script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>

    <style>
        * {
            /* 清除所有元素自带的内外边距 */
            padding: 0;
            margin: 0;
        }


        body {
            /* 页面占浏览器可视区域的高度 */
            height: 100%;
        }

        #app {
            height: 100%;
        }
        .el-tabs__header {
            margin: 0 !important;
        }
        .el-card__body {
            padding: 5px;
        }
        .video-table {
            height: calc(100vh - 100px);
            width: 100%;
            overflow: auto;
        }

        .video-table::-webkit-scrollbar {
            width: 1px;
            color: lightblue;
        }

        #video-detail {
            width: 98.8%;
            height: 100%;
            /*position: absolute;*/
            z-index: 999;
            left: 0;
            background-color: whitesmoke;
            overflow: auto;
            font-size: 14px;
            line-height: 28px;
        }

        #video-detail img {
            height: 300px;
        }
        .video-summary {
            border: 1px solid;
            border-color: rgba(130, 58, 160, 0.13);
            border-radius: 2px;
            min-height: 360px;
        }

        .detail-header {
            width: 100%;
            height: 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .detail-playlist {
            border: 1px solid;
            border-color: rgba(130, 58, 160, 0.13);
            border-radius: 2px;
            padding: 10px 5px;
        }

        .col-xs-1 {
            padding: 10px;
        }
        .myui-content__thumb {
            float: left;
        }
        .myui-content__thumb .myui-vodlist__thumb {
            width: 220px;
        }
        myui-vodlist__thumb .picture {
            background: none;
            overflow: hidden;
        }
        .myui-content__detail {
            width: calc(100% - 50px);
            padding-left: 20px;
        }
        .myui-content__detail a {
            text-decoration: none;
            color: black;
            pointer-events: none;
        }

        ul.rating {
            list-style-type: none;
        }
    </style>

</head>

<body>
<div id="app">

    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" style="height: 100%;">
        <el-tabs style="padding: 0 10px;" v-model="activeName">
            <el-tab-pane label="浏览" name="view">
                <el-card shadow="always" style="height: 90vh;" v-show="cardShow">
                    @*搜索表单*@
                    @*<el-form :inline="true" :model="queryArg" style="margin: 5px 2px;" v-show="formShow">
                        <el-form-item label="类型">
                            <el-select v-model="queryArg.type">
                                <el-option label="电视剧" value="1"></el-option>
                                <el-option label="电影" value="2"></el-option>
                            </el-select>

                        </el-form-item>
                        <el-form-item label="名称">
                            <el-input v-model="queryArg.name"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @@click="onSearch()">搜索</el-button>
                        </el-form-item>
                    </el-form>

                    <el-divider v-show="dividerShow"></el-divider>*@

                    <!-- 视频列表 -->
                    <el-table :data="tableData" class="video-table" v-show="videolistShow">
                        <el-table-column prop="name" label="名称" width="250">
                        </el-table-column>
                        <el-table-column prop="date" label="更新" width="200">
                        </el-table-column>
                        <el-table-column prop="url" label="地址" width="0" v-if="false">
                        </el-table-column>
                        <el-table-column prop="address" label="操作">
                            <template slot-scope="scope">
                                <el-button @@click="handleDetail(scope.row)" type="text" size="small">
                                    详情
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <!-- 分页 -->
                    <el-pagination small layout="prev, pager, next" :page-size="18" :total="totalPage"
                                   :current-page="cunrrentPage" @@current-change="handleCurrentChange" v-show="paginationShow">
                    </el-pagination>
                </el-card>
                
                <!-- 详情页 -->
                <div id="video-detail" v-if="detailIsShow">
                    <div style="width: 99%;">
                        <div class="detail-header">
                            <span>详情</span>
                            <span style="float: right;margin-right: 10px;">
                                <i id="detail-close" @@click="detailClose()" class="el-icon-close"
                                   style="color: red;cursor: pointer;">
                                </i>
                            </span>
                        </div>

                        <div class="detail-body" style="overflow: auto;">

                            <div class="video-summary" v-html="videoSummary">
                                <!-- {{videoSummary}} -->
                            </div>

                            <div class="detail-playlist">
                                <span style="padding-left: 10px;">播放</span>
                                <div style="padding: 5px;">
                                    <a v-for="play in videoPlayList" :href="play.address"
                                        @@click.prevent="playVideo(play.address,play.episode)">
                                        <el-tag type="success" effect="plain" size="medium" style="margin: 5px;">
                                            {{play.episode}}
                                        </el-tag>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </el-tab-pane>

            @*播放器*@
            <el-tab-pane label="播放" name="player" style="height: 92vh;">
                <div>
                    <div>
                        <h5 id="play-tiltle" style="display: inline;color: mediumpurple;">『第一集』</h5>
                        <span style="float: right;padding: 2px 5px;" @@click.prevent="playerShowDetail()">
                            
                            详情<i id="show-detail" class="el-icon-upload2"
                                 style="cursor: pointer;color: red;"></i>
                        </span>
                    </div>

                    <div>
                        @*video.js*@
                        <section id="videoPlayer" style="height: 92vh;">
                            <video id="myvideo" controls autoplay preload class="video-js vjs-default-skin vjs-big-play-centered" poster="" style="width:100%;height: 98%;">
                                <source src="" type="application/x-mpegURL" id="target">
                            </video>
                        </section>
                    </div>

                </div>

            </el-tab-pane>
        </el-tabs>
    </el-col>


</div>


<script src="~/js/vue.js"></script>
<script src="~/js/axios.min.js"></script>
<script src="~/lib/element-ui/index.js"></script>


<script>
    var vm = new Vue({
        el: '#app',
        data: function () {
            return {
                baseURL: "https://www.jpysvip.net/",
                // 连续剧
                videoType: "/vodtype/2.html",
                // 国产剧
                domesticDrama: "vodshow/13-----------.html",
                // 国产剧翻页1（前一部分）
                domesticDramaTurnPages1: "vodshow/13--------",
                // 国产剧翻页1（后一部分）
                domesticDramaTurnPages2: "---.html",


                // 视频列表表格数据
                tableData: [],

                // 搜索参数
                queryArg: {
                    // 视频类型
                    type: "1",
                    // 视频名称
                    name: ""
                },

                // 总页数
                totalPage: 0,
                // 当前页码
                cunrrentPage: 1,

                cardShow: true,
                // 搜索表单是否显示
                formShow: true,
                // 分隔线
                dividerShow: true,
                // 视频列表是否显示
                videolistShow: true,
                // 翻页是否显示
                paginationShow: true,
                // 详情页是否显示
                detailIsShow: false,
                // 播放器是否显示
                playerShow: false,

                // 视频标题
                videoTitle: "",
                // 视频简介
                videoSummary: "",
                // 视频播放地址列表
                videoPlayList: [],
                // 活动的tab页
                activeName: "view",
                // 真实播放地址
                realPlayUrl: "",
            }
        },
        mounted: function () {
            // 获取首页数据
            this.getHomeDate();
        },
        methods: {
            // 获取数据
            getHomeDate() {
                // 国产剧
                let url = this.baseURL + this.domesticDrama;
                axios.get("GetHomeData", { params: { url: url } }).then((res) => {
                    //console.log(res.data);
                    //console.log(res.data.totalPage);

                    this.tableData = res.data.data;
                    this.totalPage = Number(res.data.totalPage) * 18;
                });

            },
            // 列表页点击详情按钮
            handleDetail(obj) {
                //console.log("详情obj==", obj);
                axios.get("GetDetail", { params: { url: obj.url } }).then((res) => {
                    //console.log(res.data.data.playInfo);
                    this.videoTitle = res.data.data.title;
                    this.videoSummary = res.data.data.introduction;
                    this.videoPlayList = res.data.data.playInfo;
                    this.cardShow = false;
                    this.detailIsShow = true;
                });
            },
            // 视频播放页调起详情页
            playerShowDetail() {
                if (this.videoSummary == "") {
                    this.activeName = "view";
                } else {
                    this.cardShow = false;
                    this.detailIsShow = true;
                    this.activeName = "view";
                }
            },
            // 搜索
            onSearch() {

            },
            // 页码点击翻页
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                let url;
                if (val == 1) {
                    // 国产剧
                    url = this.baseURL + this.domesticDrama;
                } else {
                    // /vodshow/13--------2---.html
                    // 拼接翻页链接
                    url = `${this.baseURL}${this.domesticDramaTurnPages1}${val}${this.domesticDramaTurnPages2}`
                }
                console.log("翻页链接为：", url);
                axios.get("GetHomeData", { params: { url: url } }).then((res) => {
                    this.cunrrentPage = val;
                    this.tableData = res.data.data;
                });
            },
            detailClose() {
                this.cardShow = true;
                this.detailIsShow = false;
            },
            // 播放视频
            playVideo(playurl, episode) {
                //console.log(playurl,episode);
                // 获取真实播放地址
                axios.get("GetRealUrl", { params: { url: playurl } }).then((res) => {
                    console.log("真实播放地址为： ", res.data.data);
                    this.realPlayUrl = res.data.data;
                    this.playerShow = true;
                    this.activeName = "player";

                    // 获取播放器对象 myvideo
                    var player = videojs("myvideo");
                    player.ended();
                    player.src(this.realPlayUrl);    //设置播放地址
                    // player.load();
                    player.play();  //开始播放

                    //设置播放标题
                    document.getElementById("play-tiltle").innerText = ("『" + episode + "』 " + this.videoTitle);
                });

            }
        }
    });
</script>
</body>

</html>